<template>
  <div class="sy-container">
  <section class="sy1 chj_thematic_banner">
      <img src="~/assets/img/m_jzzzbanner.png" alt="">
  </section>
    <section class="chjjzzz_top">
      <h3>精选建筑资质服务<span>建筑工程设计、招投标、施工等业务必备</span></h3>
       <ul class="chjjzzz_toplist af">
         <li v-for="(item,index) in service" :key="index" :class="index==sele1?'on':''" @mouseover="sele1=index">{{item.tit}}</li>
       </ul>
     <div class="chjjzzz_top_con" v-if="sele1==0">
        <div class="le">
          <img src="~/assets/img/chjm_jzzzimg1.png" alt="">
          <p>施工总承包资质</p>
        </div>
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list1"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgszcb">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
     <div class="chjjzzz_top_con" v-if="sele1==1">
        <div class="le">
          <img src="~/assets/img/chjm_jzzzimg2.png" alt="">
          <p>施工专业承包资质</p>
        </div>
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list2"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgszxcb">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
     <div class="chjjzzz_top_con"  v-if="sele1==2">
        <div class="le">
          <img src="~/assets/img/chjm_jzzzimg3.png" alt="">
          <p>建筑行业设计资质</p>
        </div>
        <div class="ri">
          <ul class="ri_list af">
            <li v-for="(item,index) in list3"><a style="color: #252129;" href="/Mobile/ArchitectureDetails/jzgcsjzz">{{item.tit}}</a></li>
          </ul>
        </div>
     </div>
    </section>

    <section class="sy sy4 chjjzzz_sy4">
      <h3>精选建筑资质服务<span>建筑工程设计、招投标、施工等业务必备</span></h3>
      <div>
        <ul>
          <!-- 循环体 -->
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgssglwzz">
              <img src="~/assets/img/cjjzz2_i1.png" alt="">
              <h4>施工劳务资质</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgsscxkz">
              <img src="~/assets/img/cjjzz2_i2.png" alt="">
              <h4>安全生产许可证</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ServiceDetails/336">
              <img src="~/assets/img/cjjzz2_i3.png" alt="">
              <h4>异地进京备案</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ServiceDetails/337">
              <img src="~/assets/img/cjjzz2_i4.png" alt="">
              <h4>建筑公司代理记账</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgsgsfw">
            <img src="~/assets/img/cjjzz2_i5.png" alt="">
            <h4>建筑公司注册</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgszx">
            <img src="~/assets/img/cjjzz2_i6.png" alt="">
            <h4>建筑公司注销</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgszr">
            <img src="~/assets/img/cjjzz2_i7.png" alt="">
            <h4>资质转让</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgszzsj">
              <img src="~/assets/img/cjjzz2_i8.png" alt="">
              <h4>资质升级</h4>
            </a>
          </li>
          <li>
            <a href="/Mobile/ArchitectureDetails/jzgszzyq">
              <img src="~/assets/img/cjjzz2_i9.png" alt="">
              <h4>资质延期</h4>
            </a>
          </li>
          <!-- 循环体 -->
        </ul>
      </div>
    </section>


<!--  -->
    <section class="sy sy8">
      <h3>咨询管家<span style="font-size: .19rem">专业管家在线服务，一对一免费咨询</span></h3>
      <div class="two zb">
        <ul class="ct zb">
          <li v-for="(data,id) in title.gj" :key="id" :class="'li'+id" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>
              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
            <a @click="chj_gj(data,id)"  href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>

    <section class="sy sy9" style="margin-top: .18rem">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em @click="more()">更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  // import Logo from '~/components/Logo.vue'

  export default {

    components: {
      // Logo
    },
    data(){
      return{
        datas:null,
        sele1:0,
        service:[
          {tit:"施工总承包资质"},
          {tit:"施工专业承包资质"},
          {tit:"建筑行业设计资质"}
        ],
        list1:[
          {tit:'建筑工程总承包',},
          {tit:'市政总承包资质',},
          {tit:'机电工程总承包资质',},
          {tit:'电力施工总承包资质',},
          {tit:'通信施工总承包资质',}
          ],
          list2:[
            {tit:'装饰装修资质',},
            {tit:'钢结构工程资质',},
            {tit:'消防设施工程资质',},
            {tit:'建筑机电安装资质',},
            {tit:'防水防腐保温资质',},
            {tit:'环保工程资质',},
            {tit:'输变电资质',},
            {tit:'电子与智能化资质',},
            {tit:'建筑幕墙资质',},
            {tit:'地基基础资质',},
            {tit:'起重设备安装资质',},
            {tit:'古建筑资质',},
          ],
          list3:[
            {tit:'建筑智能化设计资质',img:'jz_jzhyi1.png'},
            {tit:'环境工程设计资质',img:'jz_jzhyi2.png'},
            {tit:'钢结构设计资质',img:'jz_jzhyi3.png'},
            {tit:'工程勘察专业资质',img:'jz_jzhyi4.png'},
            {tit:'工程设计专项资质',img:'jz_jzhyi5.png'},
            {tit:'建筑幕墙设计资质',img:'jz_jzhyi6.png'},
            {tit:'工程设计综合资质',img:'jz_jzhyi7.png'},
            {tit:'工程勘察综合资质',img:'jz_jzhyi8.png'},
            {tit:'建筑装饰设计资质',img:'jz_jzhyi9.png'},
            {tit:'照明工程设计资质',img:'jz_jzhyi10.png'},
            {tit:'工程勘察劳务资质',img:'jz_jzhyi11.png'},
            {tit:'风景园林工程设计资质',img:'jz_jzhyi12.png'},
            {tit:'消防设施工程设计资质',img:'jz_jzhyi13.png'},
          ],
        zzfw:[
          {img:'cjjzz2_i1.png',tit:'施工劳务资质'},
          {img:'cjjzz2_i2.png',tit:'安全生产许可证'},
          {img:'cjjzz2_i3.png',tit:'异地进京备案'},
          {img:'cjjzz2_i4.png',tit:'建筑公司代理记账'},
          {img:'cjjzz2_i5.png',tit:'建筑公司注册'},
          {img:'cjjzz2_i6.png',tit:'建筑公司注销'},
          {img:'cjjzz2_i7.png',tit:'资质转让'},
          {img:'cjjzz2_i8.png',tit:'资质升级'},
          {img:'cjjzz2_i9.png',tit:'资质延期'}
          ]

      }
    },
    async asyncData ({ params }) {
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'44'
      }});
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {zym:nh2.data,gj:nh3.data};
    return { title: data}
  },
  head() {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript },
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  mounted:function(){
    $('header').show();
    function IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
    if(IsPC()){
      this.$router.push('/Finance');
    }else{

    }

  }
  ,methods:{
    chj_gj:function(e1,e2){
      let href = '/Mobile/visitingCard/'+e1.id
      location.href = href;
    },
    more:function(e){
      location.href = '/Mobile/More';
    },

    xqymtz:function(e1,e2){
      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      location.href = href;
    },


  }

  }
</script>

<style>

</style>
